前言：最近为了了解前端和服务器之间的通讯是如何工作的，所以做了一个简单的web项目，包括web界面、服务器接口、数据库等，以本机作为服务器来开发了一个相对完整的demo，最终可以正常运行。因为本人是做iOS开发的，所以这里用到的很多知识我也仅仅是了解的比较浅，因为重点只是熟悉一下前端和服务器之间的交流流程，中间使用到的语言也只是为这次demo开发准备。

中间用到的知识包括：

前端：html、css、js、jQuery、ajax。

服务器：Flask、python3。

数据库：MongoDB、pymongo。

用到的工具：PyCharm、HBuilder、Robo 3T

环境：Mac OS

ps：以上用到的都是免费的。

本文也算是做完之后的笔记吧，由于重点在于整个的流程，所以中间很多知识的细节欠缺，欢迎大家补充相互学习。

1. 使用Python3进行服务器开发，简单说下python3的安装：

安装homebrew，终端命令：ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装python3： brew install python

完成后使用：python3 --version 查看版本。（系统自带python2.7，如果使用python --version查看的是2.7的版本，同理直接使用python进入的也是2.7版本，如果你想在终端使用python进入python3的环境，可以在.base_profile中用alias命令来实现，具体可自行百度）

2. 虚拟环境，用python开发做项目，那虚拟环境是很有必要的，为什么要使用虚拟环境？首先我们用python做项目，很多东西都是别人封装好的库，不必我们自己实现，例如ios、android开发也一样，而python不同的是安装的库都会安装在python目录下，例如你有三个python项目那么这三个python项目各自安装使用的库都在一个地方放着，如果项目1使用库A的1.0版本，而项目2使用库A的2.0版本，那么就可能库A的2.0版本把1.0版本覆盖了，从而导致项目1不能正常工作，所以虚拟环境对于开发python项目来说很有必要！每个项目对应各自的虚拟环境，其中其实就是把python环境复制了一份，使你每个项目安装的库都在各自的环境里，从而互不影响（说的比较浅显，望见谅😺）。

使用pip来安装：

安装virtualenv: sudo pip install virtualenv

安装virtualenvwrapper：sudo pip install virtualenvwrapper（这是安装一个虚拟环境的操作插件，使用起来更方便，如果提示失败可尝试：sudo pip install virtualenvwrapper --upgrade --ignore-installed six）

安装成功后新建一个放置虚拟环境的目录，我是在hoom下建了一个virtualenv-wokespaces：

mkdir ~/virtualenv-wokespaces

cd ~/virtualenv-wokespaces

设置环境变量，在.base_profile中添加：

export WORKON_HOME=~/virtualenv-wokespaces

source /usr/local/bin/virtualenvwrapper.sh

然后就可以在终端根目录下使用命令了：

新建虚拟环境：mkvirtualenv xxx

列出所有虚拟环境：workon

切换到某个虚拟环境：workon xxx

退出虚拟环境：deactivate

删除虚拟环境：rmvirtualenv xxx

配置好虚拟环境之后，以后写项目就建立一个对应的虚拟环境，需要安装库时就进入对应的虚拟环境后再安装。用PyCharm创建一个项目后可以再偏好设置的Project：xx -> Project Interpreter中连接自己的虚拟环境。

IDE推荐：PyCharm的community版本 https://www.jetbrains.com/pycharm/ 需要vpn

3. 数据库使用MongoDB

如何安装以及我遇到的一些问题请参考我的另一篇文章：https://www.jianshu.com/p/9c3e37e02f75。

这里是详细步骤：https://www.runoob.com/mongodb/mongodb-osx-install.html （这里有关于mongodb的各种操作，如：创建数据库、删除数据库、往数据库写数据、等。可以在这里面学习，这里不详细说了）

一定要注意其中的/data/db的连接，这个目录就是你数据库数据存放的地方，你可以自定义，在你可创建文件夹的任意地方，也可以是其他名字，创建好后使用sudo mongod --dbpath=/data/db连接上就可以，注意：mongodb启动时需要指定path也就是指定data/db路径，启动mongo就是启动了一个进程，如果这个进程关闭了，再次启动都需要指定路径，所以，如果你关机了，下次开机启动mongodb之前记得先指定路径哦。

ps：如果mongodb启动成功后在浏览器打开：http://localhost:27017，会显示“It looks like you are trying to access MongoDB over HTTP on the native driver port.”

4.数据库可视化GUI推荐：Robo 3T

下载链接：https://robomongo.org/download

使用教程随便贴一个：https://www.bbsmax.com/A/obzb7V2BJE/ ,可自行百度。

弄好之后连上你的数据库你就可以在这里看到你的数据库中的数据了。

5.编写前端界面我使用的HBuilder，其实用PyCharm也可以写h5、css、js等，但是，它不会自动补全，没有代码提示😅，特别是对于我这样的新手简直不知道该怎么写代码，其实也能让他有自动补全功能，但是得付费~ 所以这里我推荐新手的话可以使用HBuilder，下载标准版也就一二十兆，h5、css、js都有自动补全，而且有内置浏览器，可以实时的看效果，对于新手还是很不错的（老手忽略），写完把代码复制到PyCharm项目中去。

下载链接：https://www.dcloud.io/hbuilderx.html （选择标准版就好，使用过程中需要安装的插件按提示安装就好）

关于环境先说到这里把，说的比较乱大家见谅 ~ 因为中间配置的时候可能会遇到各种各样的问题，这里没详细列举，如有遇到欢迎评论留言。

建议：对于要学习某种语言或者类似这样要去做一个整套的流程的项目，中间要用到不同的语言不同的知识，建议不要在某个点上死磕，非要去学全套的，没必要，学习要搞清楚学习的重点在哪里，比如我们这个项目，要用到html我要从头到尾去学html么？不需要！因为我们还要用到js、css、python等等。我们没有那个必要把每个语言学的很精通，我们做这个项目的重点也不在此。对于这种情况，我的建议是：先把项目文件建起来，然后从界面入手，先写个界面，有了界面就要有操作，然后写事件，这样一步一步往下，每一步用到什么知识再去看你用到的知识，这样最有效。

项目简介：简单说下这次做的项目功能，两个界面的web，一个登录界面，一个搜索界面，其中登录界面只需要输入账号点击登录就进入搜索界面，因为牵涉到密码比较复杂所以这里只用账号登录，输入账号后点击登录进入搜索界面。搜索界面可以根据输入的经纬度搜索对应的地址信息，并显示这个用户的搜索记录。功能部分就这些，下面来一步一步实现这个功能。

1.建立项目

用PyCharm新建一个项目，项目位置可自定义。PyCharm新建项目会有一个venv文件，这个是自带的虚拟环境，可以把这个文件删掉然后连接上面我们说的自定义的虚拟环境（当然，你也可以用这个自带的，用法自己研究下，我没有用自带的）。

（1）创建 web_location.py 文件，用来写服务器代码，提供接口。

（2）创建两个文件夹 static 和 templates。 因为此项目使用flask框架，所以根据需求需要建立这两个文件夹，其中static中放静态文件，比如css、js、图片资源等。templates中放html文件。必须这么放，不然后面会出错。

（3）在static中创建一个.css文件用来写css代码，创建个js文件用来写js代码，名字自定义。在templates中创建两个html文件，代表两个h5界面。这些文件可以先建好放着就行。

2.web界面相关

上面我们说过了，由于用PyCharm写html代码没有自动补全，所以我们在HBuilder中写界面相关的，写完把代码复制到我们上面创建好的对应的文件中就行了。关于前端界面的实现不详细说了只贴部分代码，css代码比较多所以不贴了，需要的可以留言。关于html、css、js的学习可以去找一些教程，这里是菜鸟教程的链接：https://www.runoob.com/html/html-tutorial.html 感兴趣的可以看看。

下面这个是登录界面代码：

里面引入了css文件和js文件，还有一个jquery文件，关于为什么引入jquery后面会说到。这个界面的效果如下：

下面是搜索页html代码：

这个界面我是引用了百度地图sdk，用地图作为背景。效果如下：

css代码比较多就不贴了。这样两个web界面就有了。

3.Flask框架使用 关于Flask请看这里：https://flask.palletsprojects.com/en/1.1.x/quickstart/#quickstart

通过Flask框架可以简单的开发后台，提供接口。 添加Flask库（记得前面说的！切换到这个项目对应的虚拟环境，然后再安装Flask） 终端： sudo pip install flask 安装成功后就可以在虚拟环境中看到了，如下图：

接下来在我们之前建好的web_location.py中写如下代码：

然后在终端中执行：

export FLASK_APP=hello.py flask run 就会提示你： Running on http://127.0.0.1:5000/

这是什么意思呢？其中@app.route('/')就是代表一个路径，看这里指的是：127.0.0.1:5000也就是就是你本机，这个路径指向了下面紧接着的hello_world()方法，你在浏览器中输入 http://127.0.0.1:5000/那么就会执行hello_world()方法，return 'Hello, World!'就是在网页上显示了Hello, World!字样. 网页效果如下：

你也可以这样写：

当然，我们的网页不可能就显示个hello world！我们之前已经写好了两个网页了，那么怎么把我们写好的html文件和flask关联起来呢？如果你看flask文档的话就会知道，下面直接看代码：

没错，就这么简单！Flask渲染模板使用Jinja2 （Flask已经为你自动配置了，至于什么是Jinja2，自己学习下吧💪，特别注意我们之前说到的html文件要放在templates文件夹中，否则这里不会生效）。 然后你就可以用http://0.0.0.0:8080/login在浏览器打开你的登录页面了。

同理，写一个搜索页的链接：

此时你就可以用 http://0.0.0.0:8080/login访问登录页面，用http://0.0.0.0:8080/search访问搜索页面，那么直接用http://0.0.0.0:8080呢？ 还是只会显示一个’hello world！‘，那么如果我想默认首页就是登录页呢？ 用重定向：

这样就ok了。 当然这里面牵涉到很多知识没有细说，比如：Jinja2、GET、POST、重定向、等等。大家有兴趣可以慢慢研究。

4. 事件

上面我们可以显示我们的网页了，但是正常的网页不仅能看，还得能操作不是！下面我们就给我们的网页加上交互吧！

上面的登录页h5代码里面其实已经调用了js方法了，登录按钮，调用了login()方法，我们在js文件中实现这个方法：

对应的调用代码：

js代码：